<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码生成器</title>
    <!--<script type="text/javascript" src="statics/jquery-3.3.1.min.js"></script>-->
    <!--<script type="text/javascript" src="statics/uuid.js"></script>-->
    <script src="{{static_url('jquery-3.3.1.min.js')}}"></script>
    <script src="{{static_url('uuid.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#div_cover").hide()
            $("#div_detail").hide()
        });
        function addCol(){
            //alert($("#standard_tr").innerHTML)
            uuid=Math.uuid()
            len=$(".standard_tr").length
            var standart="<tr class='standard_tr' ><td class='index_td'>"+(len+1)+"</td><td><input type='text' placeholder='列名'/></td><td><select><option value='0'>字符串 varchar(18)",user_id="0")<option value='1'>长文本 text",user_id="0")<option value='2'>数字 int(8)",user_id="0")<option value='3'>日期 date",user_id="0")</select></td><td><input type='radio' class='is_null' name='is_null_"+uuid+"' checked='checked' value='1'/>是  <input type='radio' class='is_null' name='is_null_"+uuid+"' value='0'/>否 </td> <td><input type='radio' class='primary_key' name='is_primary_key'/>是</td><td><input type='button' value='删除' onclick='delCol(this)'/> </td></tr>"
            $("#table_content").append(standart)
        }

        function delCol(obj){
            //需要改变序号，not null的单选序号
            obj_tr=$(obj).parent().parent()
            obj_tr.remove()
            //改变序号
            index_td=$(".index_td")
            len=index_td.length
            for (var i=0;i<len;i++){
                //alert(i)
                td=index_td[i]
                $(td).html(i+1)
            }
        }

        function showDetail() {
            //设置div_cover的长宽
            width=$("#div_content").css("width")
            height=$("#div_content").css("height")
            $("#div_cover").css("width",width)
            $("#div_cover").css("height",height)
            //得到所有的数据
            result_json={}
            field_names=$("#table_content input[type='text']")
            field_types=$("#table_content select")
            field_is_nulls=$("#table_content input[class='is_null']:checked")
            field_primary_keys=$("#table_content input[class='primary_key']")
            detail_html="<table border='1px solid black' style='margin:10px 20%;text-align: center'><th>序号</th><th>列名</th><th>类型</th><th>是否为Null</th><th>主键</th>"
            type_dict={"0":"varchar(18)","1":"text","2":"int(8)","3":"date"};
            null_not={"1":"","0":"not null"};
            has_a_primary_key=false
            for (var i=0;i<field_names.length;i++){
                index=i+1
                ele_json={}
                field_input=$(field_names[i]).val()
                if (field_input==""){
                    alert("第"+index+"行的列名不能为空！")
                    return false
                }
                field_select=type_dict[$(field_types[i]).val()]

                field_null=null_not[$(field_is_nulls[i]).val()]
                field_primary_key=""
                if ($(field_primary_keys[i]).prop("checked")){
                    field_primary_key="yes"
                    has_a_primary_key="true"
                }
                ele_json["name"]=field_input
                ele_json["type"]=field_select
                ele_json["null"]=field_null
                ele_json["key"]=field_primary_key

                result_json[index]=ele_json


                detail_html+="<tr><td>"+(i+1)+"</td><td>"+field_input+"</td><td>"+field_select+"</td><td>"+field_null+"</td><td>"+field_primary_key+"</td></tr>"

            }
            if (!has_a_primary_key){
                alert("必须要有一个主键！")
                    return false
            }

            detail_html+="</table>"
            detail_html+="<input type='button' value='生成代码' style='margin-top:30px;margin-left: 30%;font-size: 20px' onclick='uploadData()'/>"
            detail_html+="<input type='button' value='继续设置' style='margin-top:30px;margin-left: 10%;font-size: 20px' onclick='closeDetail()'/>"
            //alert(detail_html)
            $("#div_detail").html(detail_html)
            //$("#div_cover").html(detail_html)

            $('#div_cover').show()
            $('#div_detail').show()
            $('#div_detail').animate({
                top:'10%',
                opacity:'1'
            })
            $("#data").val(JSON.stringify(result_json))
        }

        function uploadData(){
            data=$("#data").val()
            //var json =JSON.parse(data)
            $.ajax({
                type:"post",
                url:"/code_auto",
                data:data,
                cache:false,
                success:function(data){
                    alert(data);
                },
                error:function(){
                    alert("error!");
                },
            });
        }

        function closeDetail(){
            $('#div_detail').animate({
                top:'50%',
                opacity:'0'
            })
            $('#div_cover').hide()
            setTimeout(function(){
                $('#div_detail').hide()
            },300)

        }
    </script>
    <style>
        .shadow{
           -webkit-box-shadow: #666 0px 0px 10px;
           -moz-box-shadow: #666 0px 0px 10px;
           box-shadow: #666 0px 0px 10px;
           background: #EEFF99;
        }
    </style>
</head>

<body>
    <input type="hidden" id="data"/>
    <div style="width:600px;left:0px;top:0px" id="div_content">

        <h1 style="margin: 0px 30%;">代码生成器</h1>
        <input type="button" value="新增列" style="line-height: 100px;width: 100px;font-size: large;margin-left: 300px" onclick="addCol()"/>
        <input type="button" value="查看结构" style="line-height: 100px;width: 100px;font-size: large;margin-left: 20px" onclick="showDetail()"/>
        <form id='form' style="margin-top: 20px;">
            <table id='table_content' border='1px solid black' style="text-align: center">
                <thead>
                    <th>序号</th>
                    <th>列名</th>
                    <th>列类型</th>
                    <th>是否可以为null</th>
                    <th>是否为主键</th>
                    <th>操作</th>
                </thead>
                <tr class='standard_tr'>
                    <td class='index_td'>
                        1
                    </td>
                    <td>
                        <input type='text' placeholder='列名'/>
                    </td>
                    <td>
                        <select>
                            <option value='0'>字符串 varchar(18)",user_id="0")
                            <option value='1'>长文本 text",user_id="0")
                            <option value='2'>数字 int(8)",user_id="0")
                            <option value='3'>日期 date",user_id="0")
                        </select>
                    </td>
                    <td><input type='radio' class="is_null" name='is_null' checked='checked' value='1'/>是  <input type='radio' class="is_null" name='is_null' value='0'/>否 </td>
                    <td><input type='radio' class="primary_key" name='is_primary_key' checked='checked'/>是</td>
                    <td><input type='button' value='删除' onclick="delCol(this)"/> </td>
                 </tr>
            </table>
        </form>
    </div>
    <div id="div_cover" style="position: absolute;left:0px;top:10px;width:100%;height:100%;">

    </div>
    <div id="div_detail" class="shadow" style="position: absolute;left:30%;top:50%;width:40%;background-color: aliceblue;opacity:0">


    </div>


</body>
</html>

